Purpose

Improve catalogue browsing and reduce unnecessary data fetching, rendering, and image processing. Give users control over navigation and component replacement, with clear feedback and recovery from failed requests.

Changes

• Keep users in the catalogue after adding a component, with a compact success notification and an optional View build action.
• Ask for confirmation before replacing an existing component, showing the current and proposed parts with images.
• Reuse the success notification for component removal.
• Add Try again for failed catalogue requests, preserving filters, pagination, and previously loaded results.
• Restore the page’s default category when resetting filters on desktop and mobile.
• Fetch catalogue summaries first and load full specifications when opening details or adding a part to the build.
• Retain specifications in mounted cards so opening details and subsequently adding the part avoids another request.
• Lazy-load catalogue images and use one shared detail dialog per preview instead of a dialog for every card.
• Memoize unchanged cards and keep previous results visible during loading.
• Reserve space for the result count to prevent layout jumps.
• Cache catalogue responses for one minute, with a maximum of 100 cached pages.
• Request WebP output when cropping mobile detail images instead of allowing canvas to default to PNG.
• Adjust mobile detail titles to avoid overlapping the close button.
• Update the README’s accessibility, sustainability, and current-prototype descriptions.

Related issues

Closes #98
Closes #101

Testing

• npm --prefix frontend test — 24 tests passed.
• npm --prefix frontend run build — passed.
• Targeted ESLint checks passed for changed application and test files during implementation. A full-project lint run was not recorded.
• Automated coverage includes cached-result reuse and expiry, specification reuse, unchanged-card rendering, retrying failed requests with the same parameters, and pagination without duplicated results.
• Before/after React Profiler recordings showed fewer commits in the recorded browsing interaction. This is not a measured overall speed improvement.
• Browser Network screenshots confirmed that cropped mobile images changed from data:image/png to data:image/webp.
• A complete manual pass of the final interactions on both mobile and desktop remains to be recorded.

Screenshots

Checklist

• I have reviewed my own changes.
• The changes meet the linked issues’ acceptance criteria, where applicable.
• I have run automated checks and recorded the results above.
• I have added or updated tests where needed.
• I have updated documentation where needed.
• I have verified the final interactions on mobile and desktop.
• I have included screenshots for visual changes, or marked them not applicable.